import React, { useState } from 'react';
import { Modal, Button, Tabs, Form, Select, Input } from 'antd';

const { TabPane } = Tabs;
const { Option } = Select;

const paramType = {
  tag: '标签',
  text: '常量',
  time: '时间',
  datetime: '日期时间',
};
export default function index({ param }) {
  const [form] = Form.useForm();
  const [defineModelVisible, setDefineModelVisible] = useState(false);
  const [obj, setObj] = useState({});
  const handleReplace = (value) => {
    return value.split(/\{\{|\}\}/);
  };

  const onDefineModelCancel = () => {
    setDefineModelVisible(false);
  };

  const onOpenModelCancel = (value) => {
    console.log(value);
    setDefineModelVisible(true);
  };

  const renderActionDefineModel = () => {
    return (
      <Modal
        visible={defineModelVisible}
        width={600}
        title='动作定义'
        onCancel={onDefineModelCancel}
        footer={[
          <Button key='submit' type='primary'>
            保存
          </Button>,
          <Button key='back'>取消</Button>,
        ]}
      >
        <Tabs defaultActiveKey='1' type='card'>
          <TabPane tab={paramType[obj.dataType]} key={obj.dataType}>
            <Form form={form} style={{ height: '320px' }}>
              {obj.dataType == 'tag' && (
                <Form.Item label='标签值'>
                  <Select mode='multiple' allowClear>
                    {obj?.tagList?.map((tag) => {
                      return (
                        <Option
                          key={tag.code}
                          label={tag.name}
                          value={tag.code}
                        />
                      );
                    })}
                  </Select>
                  ,
                </Form.Item>
              )}
              {obj.dataType == 'text' && (
                <Form.Item>
                  <Input.TextArea
                    placeholder='请输入...'
                    style={{ height: '300px' }}
                  />
                  ,
                </Form.Item>
              )}
            </Form>
          </TabPane>
        </Tabs>
      </Modal>
    );
  };

  const renderValue = (value) => {
    return value.map((item) => {
      const project = param.paramProperties.find(t => t.name === item);
      if (project?.name) {
        return (
          <span
            style={{ color: 'red' }}
            key={item.name}
            onClick={() => {
              onOpenModelCancel();
              setObj({ ...project });
            }}
          >
            {item}
            </span>
        );
      } else {
        return item;
      }
    });
  };
  return (
    <div>
      {renderValue(handleReplace(param.name))}
      {renderActionDefineModel()}
    </div>
  );
}
